<template>
    <el-row style="padding: 2%;width: 100%;" justify="center" align="middle">
        <el-col :span="24">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">跳蚤市场</el-breadcrumb-item>
                <el-breadcrumb-item>
                    订单信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="20">
            <el-divider content-position="left">
                <el-text style="font-size: x-large;font-weight: bold;">
                    订单
                </el-text>
            </el-divider>
        </el-col>
        <el-col :span="15" style="margin-top: 2%;">
            <el-divider content-position="center">
                <el-text style="font-size: large;font-weight: bold;">
                    个人信息
                </el-text>
            </el-divider>
        </el-col>
        <el-col :span="15">
            <el-form ref="ruleFormRef" :model="ruleForm">
                <el-form-item label="创建时间">
                    <el-text>{{ ruleForm.createTime }}</el-text>
                </el-form-item>
                <el-form-item label="用户名称：">{{ user?.username }}</el-form-item>
                <el-form-item v-model="ruleForm.uid" label="用户UID：">{{ user?.uid }}</el-form-item>
                <el-form-item label="手机号码：">{{ user?.phoneNumber }}</el-form-item>
                <el-form-item label="订单状态：">待支付</el-form-item>
                <el-form-item v-model="ruleForm.address" label="收货地址：">{{ address }}</el-form-item>
            </el-form>
        </el-col>
        <el-col :span="15">
            <el-divider content-position="center">
                <el-text style="font-size: large;font-weight: bold;">
                    商品信息
                </el-text>
            </el-divider>
            <el-form ref="ruleFormRef" :model="ruleForm">
                <el-form-item label="商品图片">
                    <el-image style="width: 200px;" :src="url"></el-image>
                </el-form-item>
                <el-form-item label="商品编号：">{{ commodity?.gid }}</el-form-item>
                <el-form-item label="商品名称：">{{ commodity?.commodityName }}</el-form-item>
                <el-form-item label="商品类型：">{{ commodity?.type }}</el-form-item>
                <el-form-item label="商品状态：">正常</el-form-item>
                <el-form-item label="单品售价：">¥{{ commodity?.price }}</el-form-item>
                <el-form-item label="购买数量：">{{ count }}</el-form-item>
                <el-form-item label="应付款：">{{ price }}</el-form-item>
                <el-form-item label="使用积分：">{{ integral }}</el-form-item>
                <el-form-item label="优惠金额：">¥{{ coupon }}</el-form-item>
                <el-form-item label="优惠后付款：">¥{{ finalPrice }}</el-form-item>
                <el-form-item label="支付方式：">{{ user?.pay }}</el-form-item>
                <el-form-item label="物流：">{{ commodity?.store?.express }}</el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24" style="margin-bottom: 5%;">
            <el-row style="padding: 2%;width: 100%;" justify="center" align="middle">
                <el-button type="warning" plain style="width: 50%;padding: 2%;" @click="submitForm">{{ status
                    }}</el-button>
            </el-row>
        </el-col>
    </el-row>
</template>


<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { userInfoStore } from '../assets/userStore/userStore.ts';
import { createOrder, pay, queryCartsByCid, queryCommodityByGid, queryDefaultAddressByUid, queryUser } from '../assets/net/NetUtils.ts';
import { ElMessage, FormInstance } from 'element-plus';
import { UserModel } from '../assets/model/User.ts';
import { CommodityModel } from '../assets/model/Commodity.ts';
import { OrdersModel } from '../assets/model/Orders.ts';
import { CartsModel } from '../assets/model/Carts.ts';


const userStore = userInfoStore();
const router = useRouter();
const route = useRoute();
const commodity = ref<CommodityModel>();
const url = ref<string>();
const user = ref<UserModel>();
const count = ref<number>();
const price = ref<number>();
const finalPrice = ref<number>();
const coupon = ref<number>();
const address = ref<string>();
const status = ref<string>('提交订单');
const cstatus = ref<number>(0);
const order = ref<OrdersModel>();
const integral = ref<number>(0);
const gid = ref<number>();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<OrdersModel>({
    uid: userStore.uid,
    createTime: new Date(),
    gid: 0,
    status: 1,
    address: '',
    pay: '',
    price: 0,
    count: 0,
    integral: 0
});

onMounted(() => {
    const way: number = Number(route.query.way);
    const cid: number = Number(route.query.cid);
    gid.value = Number(route.query.gid);
    ruleForm.gid = gid.value;
    queryCommodityByGid(gid.value)
        .then((value: CommodityModel) => {
            commodity.value = value;
            ruleForm.pay = value.store?.express!;
            url.value = `/api/image/${value.image?.url}`
        })
    queryDefaultAddressByUid(userStore.uid)
        .then((value) => {
            address.value = value.data.province + value.data.city + value.data.county + value.data.street
            ruleForm.address = address.value!
        })

    queryUser(userStore.phoneNumber)
        .then((value: UserModel) => {
            user.value = value
            if ((value.integral! / 10) >= price.value!) {
                coupon.value = price.value!
                integral.value = price.value! * 10
                ruleForm.integral = price.value!
            } else {
                integral.value = value.integral!
                coupon.value = value?.integral! / 10;
                ruleForm.integral = value.integral!
            }
            finalPrice.value = price.value! - coupon.value!
            ruleForm.price = finalPrice.value
            ruleForm.integral = integral.value
        })
    console.log(ruleForm);

    if (way == 0) {
        queryCartsByCid(cid)
            .then((value) => {
                let carts: CartsModel = value.data
                price.value = carts.price
                count.value = carts.count
                ruleForm.count = value.data.count
            })
    } else {
        price.value = Number(route.query.price);
        count.value = Number(route.query.count);
        ruleForm.count = count.value
    }


})

const submitForm = () => {
    console.log(ruleForm);
    if (cstatus.value === 0) {
        createOrder(ruleForm)
            .then((value: object) => {
                if (value.code === 200) {
                    ElMessage.success('订单提交成功，请尽快支付')
                    status.value = `立即支付¥(${finalPrice.value})`
                    cstatus.value = 1
                    order.value = value.data as OrdersModel;
                } else {
                    ElMessage.error(value.msg)
                }
            })
    } else {
        pay(order.value?.oid!).then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data)
                router.back()
            } else {
                ElMessage.error("支付失败")
            }
        })
    }
}
</script>